<template>
	 <HeaderNav active-index="7"></HeaderNav>
	 <TaskContainer>
		 <div class="toolbar">
			  <el-button type="primary" @click="handleAdd">添加模块
				<template #icon>
					<el-icon><CirclePlus /></el-icon>
				</template>
			  </el-button>
			  <el-button type="danger" @click="batchRemove">批量删除
					<template #icon>
						<el-icon><Delete /></el-icon>
					</template>
			  </el-button>
		 </div>
		 <el-table :data="list" style="width: 100%" border ref="tb">
			 <el-table-column type="selection" width="55" />
		     <el-table-column prop="id" label="序号" />
		     <el-table-column prop="name" label="模块名"/>
			 <el-table-column prop="stage_name" label="阶段名"/>
		     <el-table-column label="录入时间">
			   <template #default="scope">
				 <div style="display: flex; align-items: center">
				   <el-icon><timer /></el-icon>
				   <span style="margin-left: 10px">{{ scope.row.create_time }}</span>
				 </div>
			   </template>
			</el-table-column>
			 <el-table-column label="修改时间" prop="update_time" />
		     <el-table-column fixed="right" label="操作">
		       <template #default="scope">
		         <el-button  size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
		         <el-button type="danger" size="small"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
		       </template>
		     </el-table-column>
		</el-table>
		
		<!-- 添加分页插件 -->
		<div style="margin: 20px 0;">
		  <el-pagination background layout="prev, pager, next"
				hide-on-single-page
			   :page-size="pagination.rows"
		       :pager-count="11"
			   v-model:current-page="pagination.page"
			   :total="1000" />
		</div>
	 </TaskContainer>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue"
import TaskContainer from "@/components/TaskContainer.vue"
import Condition from "@/components/Condition.vue"
export default {
	components: {
		HeaderNav,
		TaskContainer, 
		Condition,
	},
	data() {
		return {
			pagination: {
				page: 1, 
				rows: 20, 
			},
			list: [
			  {
				id: 1,
			    create_time: '2016-05-03 11:22:33',
				update_time: '2016-05-04 11:22:33',
			    stage_name: '第一阶段', 
				name: '基础' 
			  },
			  {
			  	id: 2,
			    create_time: '2016-05-03 11:22:33',
				update_time: '2016-05-04 11:22:33',
			    stage_name: '第一阶段',
			    name: '数组' 
			  },
			]
		}
	},
	methods: {
		handleAdd(event) {
			this.$layer.open({
				type: 2,
				title: '添加模块',
				shadeClose: true,
				shade: 0.5,
				area: ['650px', '280px'],
				btn: ['保存', '关闭'] ,
				content: '/module/add',
				yes: (index, layero) => {
					layer.close(index);
				}
			})
		},
		batchRemove(event) {
			let rows = this.$refs.tb.getSelectionRows();
			console.log(rows);
		}
	}
}
</script>

<style scoped>
.table-modules {
	padding: 10px 20px;
}
.table-modules span {
	padding: 2px 10px;
	margin: 0 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.toolbar {
	position: relative;
	right: 10px;
	z-index: 200;
	text-align: right;
	margin: 20px;
	flex: 1 1 auto;
}
</style>